<template>
  <div class="category">
    <ul>
      <li v-for="(item,index) in categoryListInfo" :key='index'>
        <a href="javascript:;" @click="gotoProduct(item.categoryId)">
          <img v-lazy="item.imgUrl" alt="">
          <span>{{item.name}}</span>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Category',
  props: {
    categoryListInfo: {
      type: Array,
      require: true,
      default: function () {
        return []
      }
    }
  },
  methods: {
    gotoProduct(id) {
      this.$router.push('/product/' + id)
    }
  }
}
</script>
<style scoped lang="scss">
.category {
  border-top: 2px solid skyblue;
  ul {
    display: flex;
    flex-wrap: wrap;
    height: 165px;
    padding-bottom: 10px;
    li {
      width: 75px;
      height: 75px;
      box-sizing: border-box;
      text-align: center;
      overflow: hidden;
      img {
        width: 40px;
        height: 40px;
        margin: 12px 12px 0;
      }
      a {
        color: #333;
        span {
          font-size: 14px;
          display: inline-block;
          margin-top: 3px;
        }
      }
    }
  }
}
</style>
